<template>
  <div class="manhua-pop">
    <div class="triangle"></div>
    <div class="hover-show" v-if="displayValue">
      <el-image :src="nowPicPath"></el-image>
    </div>
    <div class="tuijian-manhua">
      <a href="#" class="manhua-item" v-for="item in 4" :key="item">
        <el-image :src="require('../../assets/icon.jpg')"></el-image>
        <p>仙王的日常生活</p>
      </a>
    </div>
    <div class="manhua-rank">
      <h3>人气漫画</h3>
      <ul>
        <li v-for="item in 6" :key="item" @mouseenter="showPic(item)" @mouseleave="hidePic()">
          <span class="rank">{{item}}</span>碧蓝之海
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      displayValue: false,
      nowPicPath: require('../../assets/icon.jpg'),
      pathList: [require('../../assets/icon.jpg')],
    }
  },
  methods: {
    showPic(value) {
      this.nowPicPath = this.pathList[0]
      this.displayValue = true
    },
    hidePic() {
      this.displayValue = false
    },
  },
}
</script>
<style scoped>
.hover-show {
  display: block;
  position: absolute;
  right: -100px;
  top: 20px;
  width: 130px;
  height: 220px;
  box-shadow: 0 2px 3px #999;
}
.hover-show .el-image {
  width: 100%;
  height: 100%;
}
.triangle {
  left: 80px;
}
.manhua-pop {
  display: none;
  position: absolute;
  width: 560px;
  height: 260px;
  top: 50px;
  left: -70px;
  background: #fff;
  color: #000;
  box-shadow: 0 1px 3px #e7e7e7;
  z-index: 99;
}
.tuijian-manhua {
  float: left;
  width: 320px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border-right: 1px solid #ccc;
}
.manhua-item {
  display: block;
  padding: 20px 10px 5px;
}
.manhua-item .el-image {
  width: 136px;
  height: 77px;
}
.manhua-item p {
  color: #000;
  font-size: 14px;
}
.manhua-item:hover {
  background-color: #e7e7e7;
}
.manhua-rank {
  width: calc(560px - 320px);
  height: 100%;
  float: left;
  padding: 10px 0px 0 0px;
}
.manhua-rank h3 {
  font-size: 16px;
  font-weight: 400;
  padding-left: 20px;
  margin-bottom: 10px;
}
.manhua-rank li {
  width: 100%;
  font-size: 14px;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
  padding-left: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.manhua-rank li:hover {
  background-color: #ccc;
}
.rank {
  color: rgb(224, 82, 31);
  margin-right: 10px;
}
</style>
